<template>
  <div class="index">
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <!-- 文章内容 -->
    <van-skeleton title avatar v-if="!detailList.content" :row="50" />
    <div class="content">
      <!-- 标题 -->
      <div class="title">
        {{ detailList.title }}
      </div>
      <!-- 作者信息 -->
      <div class="info">
        <img :src="avatarImg" alt="" />
        <div class="autInfo">
          <div class="name">
            {{ detailList.author && detailList.author.nickname }}
          </div>
          <div class="time">{{ detailList.creatd_at | formatTime }}</div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="artContent" v-html="detailList.content"></div>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <div class="comTitle">评论<span class="comNum">68</span></div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <commentItem
          @reComment="reComment(item)"
          v-for="item in commentList"
          :key="item.id"
          :item="item"
        />
      </van-list>
    </div>
    <!-- 输入框 -->
    <div class="writeBox">
      <div class="input" @click="showComment">我来补充两句</div>
      <div
        class="shoucang"
        @click="shoucang"
        :class="{ actived: collectArticles.indexOf(Number(id)) !== -1 }"
      >
        <i
          class="iconfont iconbtn_shoucang_nor"
          :class="{ actived: collectArticles.indexOf(Number(id)) !== -1 }"
        ></i>
        <span>{{ detailList.collect || 0 }}</span>
      </div>
      <div
        class="star"
        @click="dianzan"
        :class="{ actived: starArticles.indexOf(Number(id)) !== -1 }"
      >
        <i
          class="iconfont iconbtn_dianzan_small_nor"
          :class="{ actived: starArticles.indexOf(Number(id)) !== -1 }"
        ></i>
        <span>{{ detailList.star || 0 }}</span>
      </div>
      <div class="share" @click="fenxiang">
        <i class="iconfont iconbtn_share"></i>
        <span>{{ detailList.share || 0 }}</span>
      </div>
    </div>
    <!-- 书写框 -->
    <van-popup
      class="input-pop"
      v-model="writeshow"
      position="bottom"
      :style="{ height: '24%' }"
    >
      <van-field
        autosize
        type="textarea"
        autofocus
        v-model.trim="inputValue"
        :placeholder="placeholder"
        rows="4"
      />
      <span :class="{ disabled: !inputValue.trim() }" @click="publishComment"
        >发送</span
      >
    </van-popup>
    <!-- 分享组件 -->
    <sharePop v-model="show" :detailList="detailList" />
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import sharePop from './sharePop.vue'
import {
  articlesShareDetail,
  articleComments,
  collectArticle,
  starArticle,
  shareImg,
  publishComment
} from '@/api/api.js'
import commentItem from './commentItem.vue'
// import { shareImg } from '../../api/api'
export default {
  components: {
    commentItem,
    // shareImg
    sharePop
  },
  computed: {
    ...mapGetters(['starArticles', 'collectArticles'])
  },
  data () {
    return {
      detailList: [],
      id: this.$route.params.id,
      avatarImg: '',
      loading: false,
      finished: false,
      limit: 5,
      start: 0,
      commentList: [],
      total: 0,
      show: false,
      writeshow: false,
      inputValue: '',
      placeholder: '我来BB两句',
      parentComment: ''
    }
  },
  methods: {
    ...mapMutations(['SETSTARARTICLES', 'SETCOLLECTARTICLES']),
    onClickLeft () {
      this.$router.go(-1)
    },
    resetInput () {
      this.inputValue = ''
      this.placeholder = '我来补充两句'
    },
    showComment () {
      this.writeshow = true
    },
    reComment (item) {
      this.placeholder = '回复: ' + item.author.nickname
      this.writeshow = true
      // 保存的回复评论id
      this.parentComment = item
    },
    async getAutDetail () {
      this.$toast.loading()
      const res = await articlesShareDetail(this.id)
      // console.log(res)
      this.detailList = res.data
      if (res.data.author.avatar) {
        this.avatarImg = process.env.VUE_APP_URL + res.data.author.avatar
      }
      this.$toast.clear()
    },
    async onLoad () {
      this.loading = true
      const res = await articleComments({
        id: this.id,
        limit: this.limit,
        start: this.start
      })
      res.data.list.forEach(v => {
        v.author.avatar = process.env.VUE_APP_URL + v.author.avatar
      })
      console.log(res)
      this.commentList.push(...res.data.list)
      this.total = res.data.total
      this.start += this.limit
      this.loading = false
      if (res.data.list.length === 0) {
        this.finished = true
      }
    },
    // 收藏
    async shoucang () {
      const res = await collectArticle({
        id: this.id
      })
      console.log(res)
      this.SETCOLLECTARTICLES(res.data.list)
      this.detailList.collect = res.data.num
      this.$toast.success('操作成功')
    },
    // 点赞
    async dianzan () {
      const res = await starArticle({
        article: this.id
      })
      console.log(res)
      this.SETSTARARTICLES(res.data.list)
      this.detailList.star = res.data.num
      this.$toast.success('操作成功')
    },
    // 分享
    async fenxiang () {
      this.show = true
      const res = await shareImg({
        id: this.id
      })
      this.detailList.share = res.data.share
    },
    // 发表评论
    async publishComment () {
      // 非空判断
      if (!this.inputValue) return
      // 发表评论的参数有两个  用一个data对象来装
      const data = {}
      data.content = this.inputValue
      if (this.parentComment) {
        data.parent = this.parentComment.id
      } else {
        data.article = this.$route.params.id
      }

      const res = await publishComment(data)

      if (this.parentComment) {
        // 添加到回复评论的内部
        this.parentComment.children_comments.push(res.data)
      } else {
        res.data.author.avatar =
          process.env.VUE_APP_URL + res.data.author.avatar
        this.commentList.unshift(res.data)
      }
      // 隐藏
      this.writeshow = false
      // 清空
      this.resetInput()
    }
  },
  created () {
    this.getAutDetail()
  }
}
</script>

<style lang="less" scoped>
.index {
  /deep/ .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .content {
    padding: 16px;
    .title {
      font-size: 16px;
      font-weight: 700;
    }
    .info {
      padding-top: 16px;
      padding-bottom: 46px;
      display: flex;
      align-items: center;
      img {
        border-radius: 50%;
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }
      .autInfo {
        .name {
          font-size: 10px;
        }
        .time {
          font-size: 10px;
          color: #ccc;
        }
      }
    }
    .artContent {
      font-size: 16px;
    }
  }
  .comment {
    margin-top: 10px;
    background-color: #ffffff;
    padding: 26px 15px;
    margin-bottom: 75px;
    .comTitle {
      font-size: 18px;
      font-weight: 500;
      position: relative;
      span {
        color: #b4b4bd;
        font-size: 12px;
        position: absolute;
        left: 40px;
        top: -5px;
      }
    }
  }
  .writeBox {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 85px;
    display: flex;
    box-sizing: border-box;
    padding: 10px 15px 0;
    background-color: white;
    width: 100%;
    justify-content: space-between;
    .input {
      height: 34px;
      background: #f7f4f5;
      border-radius: 4px;
      flex: 1;
      font-size: 14px;
      margin-top: 10px;
      color: #b4b4bd;
      margin-right: 24px;
      line-height: 34px;
      padding-left: 6px;
    }
    div:not(.input) {
      font-size: 12px;
      color: #b4b4bd;
      i {
        display: block;
        font-size: 28px;
      }
    }
    .shoucang {
      margin-right: 24px;
      text-align: center;
      // &.actived {
      //   color: #e40137;
      // }
    }
    .star {
      margin-right: 24px;
      text-align: center;
      // &.actived {
      //   color: #e40137;
      // }
    }
    .share {
      text-align: center;
    }
  }
  .input-pop {
    padding: 25px 15px 0;
    overflow: hidden;
    // 弹出层
    .van-cell::after {
      border-bottom: none;
    }
    .van-field {
      height: 99px;
      width: 100%;
      background: #f7f4f5;
      border-radius: 4px;
    }
    span {
      font-size: 16px;

      float: right;
      margin-top: 11px;
      color: #e40137;
      &.disabled {
        color: #b4b4bd;
      }
    }
    div.actived {
      color: #e40137 !important;
    }
    i.actived {
      color: #e40137 !important;
    }
  }
  /deep/ img {
    width: 100%;
  }
}
</style>
